<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--<link rel="stylesheet" href="css/eui.css">-->
</head>
<body>
<div id="app">
    <el-row type="flex" justify="center">
        <el-col :span="8">
            <h2 style="text-align: center">用户注册</h2>
            <el-divider></el-divider>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="邮箱" prop="emailAddress">
                    <el-input v-model="ruleForm.emailAddress"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="ruleForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="registerForm('ruleForm',ruleForm)">注册</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

</div>
<!-- import JavaScript -->
<script src="js/vue.min.js"></script>
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data() {
            var checkEmailAddress = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('邮箱不能为空'));
                }
                callback();
            };
            var checkNickname = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('昵称不能为空'));
                }
                callback();
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            }
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    emailAddress: '',
                    nickname: '',
                    pass: '',
                    checkPass: ''
                },
                rules: {
                    emailAddress: [
                        {validator: checkEmailAddress, trigger: 'blur'},
                    ],
                    nickname: [
                        {validator: checkNickname, trigger: 'blur'},
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            registerForm(formName, formValue) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("/register", formValue).then(function (response) {
                            if (response.data) {
                                alert('注册成功，请重新登录！');
                                location.href = '/login.html';
                            } else {
                                alert('注册失败！邮箱已存在！');
                                return false;
                            }
                        })

                    } else {
                        alert('注册失败！');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>